<!-- 景点人流排名 -->
<template>
  <CPanel>
    <template #header>小区整体情况</template>
    <template #content>
      <div class="community-info">
        <div class="info-item">
          <span class="label">总建筑面积：</span>
          <span class="value">{{ totalArea }}<span class="unit">万平方米</span></span>
        </div>
        <div class="info-item">
          <span class="label">总楼栋数：</span>
          <span class="value">{{ totalBuildings }}<span class="unit">栋</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">多层: {{ multiStory }}栋</span>
            <span class="sub-item">高层: {{ highRise }}栋</span>
            <span class="sub-item">配套: {{ supporting }}栋</span>
          </span>
        </div>
        <div class="info-item">
          <span class="label">总户数：</span>
          <span class="value">{{ totalHouses }}<span class="unit">套</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">商品房: {{ commercialHouses }}套</span>
            <span class="sub-item">公租房: {{ publicHouses }}套</span>
          </span>
        </div>
        <div class="info-item">
          <span class="label">绿化率：</span>
          <span class="value">{{ greenRate }}<span class="unit">%</span></span>
          <span class="icon green-icon"></span>
        </div>
        <div class="info-item">
          <span class="label">容积率：</span>
          <span class="value">{{ floorAreaRatio }}</span>
        </div>
      </div>
    </template>
  </CPanel>
</template>

<script setup lang="ts">
import CPanel from "@/components/common/CPanel.vue"
import { onMounted, ref } from "vue"

// 定义数据
const totalArea = ref(115)
const totalBuildings = ref(98)
const multiStory = ref(59)
const highRise = ref(35)
const supporting = ref(4)
const totalHouses = ref(9139)
const commercialHouses = ref(5267)
const publicHouses = ref(3872)
const greenRate = ref(35)
const floorAreaRatio = ref(2.2)

// 动态数字显示效果（可选）
const animateValue = (ref: any, start: number, end: number, duration: number) => {
  const range = end - start
  const step = range / (duration * 60) // 假设60fps
  const timer = setInterval(() => {
    start += step
    if (start >= end) {
      clearInterval(timer)
      start = end
    }
    ref.value = Math.floor(start)
  }, 1000 / 60)
}

onMounted(() => {
  // 可以在这里启动动画效果
  animateValue(totalArea, 0, 115, 2)
})
</script>

<style lang="scss" scoped>
.community-info {
  padding: 20px;
  
  .info-item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    .label {
      font-size: 16px;
      color: #c9d7ee;
      margin-right: 10px;
      white-space: nowrap;
    }
    
    .value {
      font-size: 20px;
      font-weight: bold;
      color: #f4a841;
      margin-right: 10px;
      
      .unit {
        font-size: 14px;
        font-weight: normal;
      }
    }
    
    // 新增内联子信息样式
    .sub-info-inline {
      display: inline-flex;
      gap: 15px;
      
      .sub-item {
        font-size: 14px;
        color: #a0b1d6;
      }
    }
    
    .icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-left: 10px;
      vertical-align: middle;
    }
    
    .green-icon {
      background: url('@/assets/images/green-icon.png') no-repeat center center;
      background-size: contain;
    }
  }
}
</style>
<style lang="scss" scoped>
.list {
  max-height: 200px;
  outline: none;
  overflow: hidden;
  &__item {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 12px 0 24px;
    box-sizing: border-box;
    font-size: 14px;
    &:nth-of-type(even) {
      background: linear-gradient(90deg, rgba(92, 109, 152, 0.8), rgba(92, 109, 152, 0));
    }
    .item__index {
      width: 30px;
      color: rgba(244, 168, 65, 1);
    }
    .item__label {
      width: 100px;
      height: 100%;
      line-height: 40px;
      overflow: hidden;
      color: rgba(201, 211, 234, 1);
    }
    .progress {
      position: relative;
      width: 156px;
      height: 5px;
      background: rgba(100, 110, 132, 1);
      overflow: hidden;
      .progress__conent {
        position: absolute;
        left: -100%;
        height: 100%;
        width: 100%;
        background: linear-gradient(90deg, #ffa832, #f8c47d);
      }
    }
  }
}
.warp {
  height: 270px;
  width: 360px;
  margin: 0 auto;
  overflow: hidden;
}
</style>
